<template>
  <div class="main">
    <top-bar></top-bar>
    <div class="main-mains w90">
      <div class="main-mains-l">
        <router-link to="/main">
          <div class="main-mains-l-return">
            <span>←</span>
            返回首页
          </div>
        </router-link>
        <router-link to="/member2/1">
          <div :class="{active:type==1 || type==2 ||type==10 ||type==11||type==12}">查看党群服务</div>
        </router-link>
        <router-link to="/member2/1">
          <div :class="{active:type==3 || type==4}">查看物业服务</div>
        </router-link>
        <router-link to="/member3/1">
          <div :class="{active:type==5 || type==6 || type == 7}">查看寻求帮助</div>
        </router-link>
        <router-link to="/member4">
          <div :class="{active:type==8}">查看其他服务</div>
        </router-link>
      </div>
      <div class="main-mains-r">
        <div class="main-mains-table">
          <div class="main-member-details">
            <span @click="returnBack()">← 返回</span>
          </div>
          <div class="main-member-cons" v-show="type==1|| type==2 ||type==8||type==10 ||type==11||type==12">
            <div class="main-member-cons-top" v-show="type==1">入党申请详情</div>
            <div class="main-member-cons-top" v-show="type==2">工会帮扶详情</div>
            <div class="main-member-cons-top" v-show="type==8">其他服务详情</div>
            <div class="main-member-cons-top" v-show="type==10">申请使用场地详情</div>
            <div class="main-member-cons-top" v-show="type==11">圆你一个心愿详情</div>
            <div class="main-member-cons-top" v-show="type==12">兴趣协会申请详情</div>
            <div class="main-member-conss">
              <table class="main-member-w">
                <tr>
                  <th>姓名</th>
                  <th>{{detailsData.personName}}</th>
                </tr>
                <tr>
                  <th>工号</th>
                  <th>{{detailsData.workNo}}</th>
                </tr>
                <tr>
                  <th>电话号码</th>
                  <th>{{detailsData.phone}}</th>
                </tr>
                <tr>
                  <th>时间</th>
                  <th>{{detailsData.createtime}}</th>
                </tr>
                <tr>
                  <th>所在公司及部门</th>
                  <th>{{detailsData.deptName}}</th>
                </tr>
                <tr>
                  <th>职务</th>
                  <th>{{detailsData.duties}}</th>
                </tr>
                <tr>
                  <th>内容</th>
                  <th>{{detailsData.context}}</th>
                </tr>
                <tr>
                  <th>图片</th>
                  <th>
                    <img :src="imgUrl[0]" alt v-show="imgUrl[0]">
                    <img :src="imgUrl[1]" alt v-show="imgUrl[1]">
                  </th>
                </tr>
              </table>
            </div>
          </div>
          <div class="main-member-cons" v-show="type==3 || type==4 || type==13 || type==14">
            <div class="main-member-cons-top" v-show="type==3">物业报修详情</div>
            <div class="main-member-cons-top" v-show="type==4">宿舍托管详情</div>
            <div class="main-member-cons-top" v-show="type==13">家政服务详情</div>
            <div class="main-member-cons-top" v-show="type==14">申请发布物业消息详情</div>
            <div class="main-member-conss">
              <table class="main-member-w">
                <tr>
                  <th>姓名</th>
                  <th>{{detailsData.personName}}</th>
                </tr>
                <tr>
                  <th>工号</th>
                  <th>{{detailsData.workNo}}</th>
                </tr>
                <tr>
                  <th>电话号码</th>
                  <th>{{detailsData.phone}}</th>
                </tr>
                <tr>
                  <th>时间</th>
                  <th>{{detailsData.createtime}}</th>
                </tr>
                <tr>
                  <th>地址</th>
                  <th>{{detailsData.adress}}</th>
                </tr>
                <tr>
                  <th>内容</th>
                  <th>{{detailsData.context}}</th>
                </tr>
                    <tr>
                  <th>图片</th>
                  <th>
                    <img :src="imgUrl[0]" alt v-show="imgUrl[0]">
                    <img :src="imgUrl[1]" alt v-show="imgUrl[1]">
                  </th>
                </tr>
              </table>
            </div>
          </div>
          <div class="feed-content clear" v-show="feedContent">
            <div class="feed-content-l">反馈内容</div>
            <div class="feed-content-r" v-text="feedContent"></div>
          </div>
          <div class="feed-back" @click="showFeedBack()">反馈消息</div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="feedBack"></div>
    <div class="property-mask" v-show="feedBack">
      <div class="property-mask-top">反馈消息</div>
      <div class="property-content">
        <el-input
          type="textarea"
          clearable
          maxlength="100"
          placeholder="请输入反馈内容"
          v-model.trim="message"
        ></el-input>
      </div>
      <div class="property-mask-btn clear">
        <div class="fl" @click="closeMask()">取消</div>
        <div class="fl" @click="uploadSure()">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "../public/top";
export default {
  components: {
    topBar
  },
  data() {
    return {
      type: this.$route.params.type, // 1入党申请  2工会帮扶 3物业报修  4宿舍申请 5搬家帮忙  6紧急用车 7二手物品 8其他
      id: this.$route.params.id, //分类的id
      detailsData: "",
      imgUrl: "",
      feedBack: false,
      message: "",
      codes: "",
      feedContent: ""
    };
  },
  methods: {
    getfeedBack() {
      let _this = this;
      let datas = {
        parentId: _this.id
      };
      _this
        .$http({
          url: _this.urls + "/feedBack/findByIdParentId",
          method: "post",
          data: datas
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.feedContent = data.data.message;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getCode() {
      switch (this.type) {
        case "1":
          this.codes = "application_party";
          break;
        case "2":
          this.codes = "union_assistance";
          break;
        case "3":
          this.codes = "property_warranty";
          break;
        case "4":
          this.codes = "dormitory_application";
          break;
        case "5":
          this.codes = "move_help";
          break;
        case "6":
          this.codes = "search_car";
          break;
        case "7":
          this.codes = "seeking_secondhand";
          break;
        case "8":
          this.codes = "other";
          break;
        case "10":
          this.codes = "application_site";
          break;
        case "11":
          this.codes = "dream_true";
          break;
        case "12":
          this.codes = "interest_association";
          break;
      }
    },
    uploadSure() {
      let _this = this;
      let datas = {
        parentId: _this.id,
        type: "membership",
        code: _this.codes,
        message: _this.message
      };
      datas = JSON.stringify(datas);
      _this
        .$http({
          url: _this.urls + "/feedBack/add",
          method: "post",
          data: datas
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.$message({
              showClose: true,
              message: "反馈成功!",
              type: "success"
            });
            _this.getfeedBack();
            _this.feedBack = false;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    closeMask() {
      this.feedBack = false;
    },
    showFeedBack() {
      this.feedBack = true;
    },
    changeType(num) {
      this.type = num;
    },
    returnBack() {
      history.go(-1);
    },
    getDetailsData() {
      let _this = this;
      let datas = {
        id: _this.id
      };
      datas = JSON.stringify(datas);
      _this
        .$http({
          url: _this.urls + "/membership/findById.do",
          method: "post",
          data: datas
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.detailsData = data.data;
            _this.imgUrl = data.data.imgUrl.split(",");
          } else {
            _this.$message({
              showClose: true,
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
    this.getDetailsData();
    this.getCode();
    this.getfeedBack();
  }
};
</script>

<style lang="less" scoped>
@import "member.less";
</style>

